<template>
  <div :class="['i-switch', { 'back-stage': backStage }]">
    <InputLabel v-if="label" :text="label" :required="required" :backStage="backStage" />
    <i-switch v-bind="$attrs" v-on="$listeners" :size="size" :value="value">
      <slot slot="open" name="open">{{text.openText}}</slot>
      <slot slot="close" name="close">{{text.closeText}}</slot>
    </i-switch>
  </div>
</template>

<script>
import InputLabel from "./InputLabel";
// @group iview
export default {
  name: "IviewSwitch",
  components: { InputLabel },
  props: {
    // 是否为后台管理样式
    backStage: {
      type: Boolean
    },
    // 改写size
    size: {
      type: String,
      default: "large"
    },
    // 解决在table render中使用是无法传props的bug
    value: {
      type: [Boolean, Number, String]
    },
    // 输入框标签
    label: {
      type: String
    },
    // 是否必填，传入label时才有效
    required: {
      type: Boolean
    },
    text: {
      type: Object,
      default: () => {
        return {
          openText: "激活",
          closeText: "禁用"
        };
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
@import "./config/input";
.i-switch {
  .input-layout();
  /deep/.ivu-switch {
    border: @input-border;
    background: @input-bg;
    box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.48);
    .input-text();
    min-width: 60px;
    .click-active;
    &:active {
      &::after {
        width: 18px;
      }
    }
    &::after {
      background: #4e4e4f;
    }
    &.ivu-switch-checked {
      background-color: @main-color;
      .ivu-switch-inner {
        position: relative;
        display: block;
        text-align: center;
        left: -6px;
        top: 1px;
        color: #2b2c2d;
      }
      &::after {
        left: 39px;
        background: #2b2c2d;
      }
    }
    &.ivu-switch-disabled {
      opacity: 1;
      background: @switch-bg-disabled;
    }
  }
}
</style>
